import React from 'react'
import { actions, connect } from 'mirrorx'
import { Modal } from 'antd'
class TopNav extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      activeItem: 0,
      activeTab: '',
      authModal: false,
      newMenuList: []
    }

    this.tab = this.tab.bind(this)
  }
  componentWillReceiveProps (nextProps) {
    if (nextProps.grantedMenus) {
      let { grantedMenus } = nextProps
      this.handleMenus(grantedMenus)
    }
  }
  componentWillMount () {
    let { search, pathname } = window.location
    this.setState({ pathname, search })
  }
  rewritePath (item) {
    item.code = item.code.replace(/\/page-/g, '')
    item.code = '/page-' + item.code.toLowerCase()
    return item
  }
  handleMenus (grantedMenus) {
    let { search, pathname } = this.state

    if (grantedMenus && Array.isArray(grantedMenus)) {
      // 对菜单做排序
      let sortedList = grantedMenus.sort((a, b) => {
        let aNum = Number(a.orderNum)
        let bNum = Number(b.orderNum)
        return aNum - bNum
      })
      // 对菜单做拼接重组
      let newMenuList = sortedList.map(item => {
        let { children } = item
        // 重新拼接路径
        item = this.rewritePath(item)
        if (children && Array.isArray(children)) {
          let newSub = children.filter(subItem => {
            subItem = this.rewritePath(subItem)
            return subItem.type === 1
          })
          item.children = newSub
        }
        item.code = item.code.replace(/\/page-/g, '')
        item.code = item.code.replace(/\s/g, '-')
        item.code = '/page-' + item.code.toLowerCase()
        return item
      })
      // url没有pathname的时候，默认去到第一个菜单
      if (!pathname || pathname === '/') {
        grantedMenus.length > 0 && (actions.routing.push({ pathname: grantedMenus[0].code }))
      } else {
        // 如果url还有保留这pathname则登录重定向到指定的pathname
        // 如果url的页面路径不在授权菜单里面，则不跳转到页面路径，而是跳转到授权菜单的第一个菜单
        let isEaqualPathname = false
        grantedMenus.forEach(item => {
          // /page-claim-detail这个菜单是特殊的，要新开窗口。
          if (item.code === pathname || pathname === '/page-claim-detail') {
            isEaqualPathname = true
          }
        })

        if (isEaqualPathname) {
          actions.routing.push({
            pathname,
            search
          })
        } else {
          grantedMenus.length > 0 && (actions.routing.push({ pathname: grantedMenus[0].code }))
        }
      }
      this.setState({
        newMenuList
      })
    }
  }

  tab (item, verificationState, subItem) {
    let { pathname } = window.location
    // 未认证
    if (verificationState === 'UNVERIFIED') {
      this.setState({
        authModal: true
      })
    } else if (verificationState === 'PENDING') {
      actions.mainModel.requestVerificationState()
    } else {
      this.setState({ activeTab: item.code })
      if (subItem) {
        actions.routing.push({ pathname: subItem.code })
      } else {
        if (pathname !== item.code) {
          if (item.children) {
            let click = true
            item.children.forEach(menuItem => {
              // 有子菜单,点击父级菜单无效
              if (menuItem.type === 1) {
                click = false
              }
            })
            click && actions.routing.push({ pathname: item.code })
          }
        }
      }
    }
  }

  handleOk () {
    actions.routing.push({ pathname: '/page-verification' })
  }
  render () {
    let { newMenuList, activeTab } = this.state
    let pathname = window.location.pathname
    const { verificationState } = this.props
    return (
      <div className='top-nav'>
        <div className='inner-nav'>
          {
            newMenuList.map((item) => {
              let children = item.children
              return <ul
                key={item.id}
                onClick={() => {
                  this.tab(item, verificationState)
                }}
                className={
                  item.code === activeTab || item.code === pathname
                    ? 'nav-item active-nav-item'
                    : 'nav-item'}>
                {item.name}
                {
                  children && children.map(subItem => {
                    return <div key={subItem.id}>
                      {
                        subItem.type === 1 &&
                        <li
                          onClick={() => {
                            this.tab(item, verificationState, subItem)
                          }}
                          key={subItem.id}
                          className={
                            subItem.code === pathname
                              ? 'sub-nav active-nav-item'
                              : 'sub-nav'}>{subItem.name}</li>
                      }
                    </div>
                  })
                }
              </ul>
            })
          }
        </div>
        <Modal
          visible={this.state.authModal}
          okText='Verify'
          cancelText='Cancel'
          onCancel={() => this.setState({ authModal: false })}
          onOk={this.handleOk}>
          <p style={{ 'paddingTop': '30px' }}>
            Please complete the verification first before using this feature.
          </p>

        </Modal>
      </div>
    )
  }
}

export default connect(state => {
  return state.menuModel
})(TopNav)
